<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script>
      var context;
      var arr = new Array();
      var starCount = 800;
      var rains = new Array();
      var rainCount =20;
      //初始化画布及context
      function init(){
        //获取canvas
        var stars = document.getElementById("stars");
        windowWidth = window.innerWidth; //当前的窗口的高度
        stars.width=windowWidth;
 				stars.height=window.innerHeight;
        //获取context
        context = stars.getContext("2d");
      }
      //创建一个星星对象
      var Star = function (){
        this.x = windowWidth * Math.random();//横坐标
        this.y = 5000 * Math.random();//纵坐标
        this.text=".";//文本
        this.color = "white";//颜色
        //产生随机颜色
        this.getColor=function(){
          var _r = Math.random();
          if(_r<0.5){
            this.color = "#333";
          }else{
            this.color = "white";
          }
        }
        //初始化
        this.init=function(){
          this.getColor();
        }
        //绘制
        this.draw=function(){
          context.fillStyle=this.color;
          context.fillText(this.text,this.x,this.y);
        }
      }
       //画月亮
      function drawMoon(){
         var moon = new Image();
           context.drawImage(moon,-5,-10);
      }
      //页面加载的时候
      window.onload = function() {
        init();
        //画星星
        for (var i=0;i<starCount;i++) {
          var star = new Star();
          star.init();
          star.draw();
          arr.push(star);
        }
  
        drawMoon();//绘制月亮
        playStars();//绘制闪动的星星
 
      }
       //星星闪起来
      function playStars(){
        for (var n = 0; n < starCount; n++){ 
          arr[n].getColor(); 
          arr[n].draw(); 
        } 
 
        setTimeout("playStars()",1200);
      }

    </script>
    <style type="text/css">
      body{
        background-color: #383838;
      }
      body,html{
      	width:100%;
      	height:100%;
      	overflow:hidden;
      	font-family: "微软雅黑";
      	}
      .login-container{
      	width: 100%;
      	position: absolute;
      	top: 0;
      	left: 0;
      	right: 0;
      	bottom: 0;
      }
      .login-content{
      	position: absolute;
      	width: 600px;
      	height: 400px;
      	top: 45%;
      	left: 50%;
      	margin-left: -300px;
      	margin-top: -250px;
      	color: #D5D5D5;
      }
      .login-container .login-content .login-title{
      	text-align: center;
      }
      .login-container .login-content h2{
      	display: inline-block;
      	color: #D5D5D5;
      	letter-spacing: 3px;
      	margin: 0;
      	padding-bottom: 0.5rem;
      }
      .login-container .login-content .login-inputs{
      	margin-top: 1rem;
      	padding-left: 9rem;
      	padding-bottom: 3rem;
      }
      .login-container .login-content .login-inputs .login-inputs-item:nth-child(2){
      	margin-top: 1rem;
      }
      .login-container .login-content .login-inputs .login-inputs-item div input{
      	border: 1px solid #5b5b5b;
      	border-radius: 5px;
      	background: none;
      	outline: none;
      	padding-left: 5px;
      	width: 20rem;
      	height: 2rem;
      	margin-top: 0.5rem;
      	color: #D5D5D5;
      	font-family: "微软雅黑";
      	-webkit-transition: all 0.8s;
		-o-transition: all 0.8s;
		transition: all 0.8s;
      }
      .login-container .login-content .login-inputs .login-inputs-item div input:focus{
      	border: 1px solid #FFFFFF;
      	
      }
      .login-container .login-content .login-button{
      	text-align: center;
      }
      .login-container .login-content .login-button button{
      	background: #E4E4E4;
      	color: #222;
      	border: none;
      	width: 20rem;
      	height: 2rem;
      	outline: none;
      	font-family: "微软雅黑";
      	cursor: pointer;
      	border-radius: 5px;
      	margin-left: 1rem;
      }
      .login-container .login-content .login-button button:active{
      	 -webkit-transform: scale(0.95);
      	 -ms-transform: scale(0.95);
      	 transform: scale(0.95);
      }
	      .footer{
					margin-top: 30px;
					font-size: 14px;
					position: absolute;
					bottom: 25%;
					left: 32%;
					right: 32%;
		}
		.footer>div{
			text-align: center;
			margin: 10px;
			color: #D5D5D5;
		}

    </style>
  </head>
  <body>
  	 <div class="login-container">
    	<div class="login-content">
    		<div class="login-title">
    			<h2>媒体评分系统</h2><br/>
    			<!--<span>The best media scoring system</span>-->
    		</div>
    		<div class="login-inputs">
    			<div class="login-inputs-item">
    				<div>用户名</div>
    				<div><input type="text" ></div>
    			</div>
    			<div class="login-inputs-item">
    				<div>密码</div>
    				<div><input type="password" ></div>
    			</div>
    		</div>
    		<div class="login-button">
    			<button onclick="location.href='后台管理网站二.html'">登录</button>
    		</div>
    	</div>
    	
    	 <div class="footer">
				<div><span>官网 | 博客 | 官微</span></div>
				<div><span> Copyright©2015 上海璞锐信息技术咨询有限公司 增值电信业务经营许可证B2-20080096 户ICP备0811</span></div>
	     </div>
    	
    </div>
    <canvas id="stars"></canvas>
    
    
    
  </body>
</html>